<!DOCTYPE html >
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script type="text/babel">
    // 你自己的代码，只可用于开发环境，产品环境会严重影响性能
  </script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
   class Toggle extends React.Component {
     constructor(props) {
       super(props);
       this.state = {isToggleOn: true};
       // This binding is necessary to make `this` work in the callback
       this.handleClick = this.handleClick.bind(this);
     }

     handleClick() {
       this.setState(prevState => ({
         isToggleOn: !prevState.isToggleOn
       }));
     }
     /* handleClick = () => this.setState(prevState => ({
       * isToggleOn: !prevState.isToggleOn
     *}))
     *
     */
     render() {
       return (
         <button onClick={this.handleClick}>
          {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
       );
     }
   }

   ReactDOM.render(
     <Toggle />,
     document.getElementById('root')
   );
  </script>
  <!--
          Note: this page is a great way to try React but it's not suitable for production.
          It slowly compiles JSX with Babel in the browser and uses a large development build of React.
    
          To set up a production-ready React build environment, follow these instructions:
          * https://reactjs.org/docs/add-react-to-a-new-app.html
          * https://reactjs.org/docs/add-react-to-an-existing-app.html
    
          You can also use React without JSX, in which case you can remove Babel:
          * https://reactjs.org/docs/react-without-jsx.html
          * https://reactjs.org/docs/cdn-links.html
        -->
</body>

</html>